<template>
  <div class="productManager">
    <div class="breadcrumb">
      <el-icon>
        <Location />
      </el-icon>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>合同管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="content">
      <div class="top">
        <div>
          <el-upload
            name="files"
            action="http://127.0.0.1:7001/contract/uploadFiles"
            :show-file-list="false"
            :on-success="handlefilesSuccess"
            :data="data123"
            :headers="headers"
          >
            <el-button type="primary">上传合同</el-button>
          </el-upload>
        </div>
      </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" width="50" />
        <el-table-column prop="file_name" label="合同名" />
        <el-table-column prop="file_size" label="合同文件大小">
          <template #default="scope">
            <div>{{scope.row.file_size / 1024 }}KB</div>
          </template>
        </el-table-column>
        <el-table-column prop="upload_person" label="上传用户" />
        <el-table-column prop="download_number" label="下载次数" />
        <el-table-column prop="upload_time" label="上传时间" />
        <el-table-column label="操作" width="140">
          <template #default="scope">
            <!-- <a
            class="mybtn"
              size="small"
              type="primary"
              download="image.jpg"
              target="_blank"
               :href="'http://127.0.0.1:7001' + scope.row.file_url"
              @click="handleDownload(scope.$index, scope.row)"
            >下载</a>-->
            <el-button
              size="small"
              type="primary"
              @click="handleDownload(scope.$index, scope.row)"
            >下载</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="pageNum"
        :page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  getcontractList, // 获取合同管理
  deleteContract,
  updateDownloadNumber,
  downloadFiles
} from "@/api/contract";
import {
  addOperationLog
} from "@/api/log";
import { useRouter } from "vue-router";
const router = useRouter();

// 调用store树中内容需要引入
import { useStore } from "vuex";
// 获取store
const store = useStore();

import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  House,
  Message,
  Grid,
  Avatar,
  Position,
  ChatLineSquare,
  Notebook,
  UserFilled,
  User,
  Notification,
  ChatRound
} from "@element-plus/icons-vue";
const data123 = reactive({
  upload_person: localStorage.getItem("name")
});
const headers = reactive({
  Authorization: localStorage.getItem("token")
});
const tableData = ref([]);
const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(0);

const handleSizeChange = val => {
  pageSize.value = val;
  togetcontractList();
};
const handleCurrentChange = val => {
  pageNum.value = val;
  togetcontractList();
};
const handleDelete = (index, row) => {
  ElMessageBox.confirm("是否删除此文件？", "删除操作", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      let query = {
        id: row.id,
        file_url: row.file_url
      };
      deleteContract(query).then(async res => {
        if (res.data.status != 0) {
          return ElMessage.error(res.data.message);
        }
        await addOperationLog({operation_person:localStorage.getItem("name"),operation_content:"对id是" + row.id + '的合同删除',operation_level:"高级"});

        togetcontractList();
        ElMessage.success(res.data.message);
      });
    })
    .catch(() => {});
};
const handleDownload = (index, row) => {
  ElMessageBox.confirm("是否确定下载次文件？", "下载操作", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      let data = {
        id: row.id
      };
      downloadFiles(data).then(async res => {
        if (res.status != 200) {
          return ElMessage.error("下载失败");
        }
        const link = document.createElement("a");
        let blob = new Blob([res.data]);
        link.style.display = "none";
        link.href = URL.createObjectURL(blob);
        // link.download = "成绩.xlsx";
        link.download = row.file_name;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        togetcontractList();
        await addOperationLog({operation_person:localStorage.getItem("name"),operation_content:"对id是" + row.id + '的合同下载',operation_level:"高级"});

      });
    })
    .catch(() => {});

  // let query = {
  //     download_number:row.download_number,
  //     id: row.id
  //   };
  //   updateDownloadNumber(query).then(res => {
  //     if (res.data.status != 0) {
  //       return ElMessage.error(res.data.message);
  //     }
  //     togetcontractList();
  //   });
};

const togetcontractList = () => {
  let data = {
    pageNum: pageNum.value,
    pageSize: pageSize.value
  };
  getcontractList(data).then(res => {
    if (res.data.status != 0) {
      return ElMessage.error(res.data.message);
    }
    tableData.value = res.data.data.list;
    total.value = res.data.data.total;
  });
};

const handlefilesSuccess = async (response, uploadFile) => {
  console.log(response, uploadFile, "response, uploadFile");
  await addOperationLog({operation_person:localStorage.getItem("name"),operation_content:"上传合同" ,operation_level:"高级"});

  togetcontractList();
};
//声明周期函数，自动执行初始化
onMounted(() => {
  togetcontractList();
});
</script>

<style scoped lang="scss">
.productManager {
}
.breadcrumb {
  display: flex;
  margin-bottom: 10px;
}
.content {
  background: #fff;
  .top {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
  }
}
.mybtn {
  padding: 4.5px 11px;
  font-size: 12px;
  border-radius: 4px;
  background: #303133;
  margin-right: 16px;
  text-decoration: none;
  color: #fff;
}
</style>